<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        body>div>h2{
            background-color: yellow;
            color: red;
        }
    </style>
    <link rel="stylesheet" href="test02.css">
</head>
<body>
<div>
    <h1 style="background-color: pink;color: yellow">lorem</h1>
    <h2>lorem</h2>
    <h3>lorem</h3>
</div>
<!-- 内联，内部，外部样式，哪种优先级比较高 内联>外部>内部 -->

<div>
    <h1>我的英雄</h1>
    <ul>
        <li>后羿</li>
        <li class="g1">蔡文姬</li>
        <li>猪八戒</li>
        <li class="r1">嬴政</li>
        <li>周瑜</li>
        <li class="g1">甄姬</li>
    </ul>
</div>
<!-- 做CSS样式时,我们一般选择用什么选择器 复用性好-->

<div id="d1">
    <input type="text" name="ty" style="border: 2px solid black">
    <img src="xz-login/yhm.png">
</div>

<div id="d2">
    <form action="http://www.tmooc.cn">
        <div id="d9">
            <span class="s1">登录学子商城</span>
            <span class="s2">新用户注册</span>
        </div>
        <div id="d8">
            <input type="text">
            <br>
            <input type="password">
            <br>
            <span class="s1">
                <input type="checkbox" name="dl" value="zd">
                自动登录
            </span>
            <span class="s2">忘记密码</span>
            <br>
            <button type="submit" class="s3">登录</button>
        </div>
    </form>
</div>
</body>
</html>